import React, { useEffect, useState } from 'react';
import { getFeishuMagicList } from '../../api/feishu';
import Filter from './Filter';
import Card from './Card';
import './index.less';

function Magic(props: any) {
  const [magicList, setMagicList] = useState([]);
  const [showList, setShowList] = useState([]);

  useEffect(() => {
    getFeishuMagicList().then((res) => {
      setShowList(res.data.items);
      setMagicList(res.data.items);
    });
  }, []);

  const renderList = () => {
    if (!showList) {
      return null;
    }
    return showList.map((item: {
      fields: {
        key: string;
        value: string;
        level: string;
        class: string;
      };
      id: string;
    }) => {
      const { fields } = item;
      return (
        <div
          key={item.id}
        >
          <Card fields={fields} />
        </div>
      );
    });
  };

  return (
    <div className='magic'>
      <Filter setShowList={setShowList} magicList={magicList} />
      {renderList()}
    </div>
  );
};

export default Magic;
